<template>
  <div class="classify">
    <MyHead title="分类"  :noBack="true">
      <div @click="gotopage('/address')">
        <van-icon name="location-o"></van-icon>
        <span>定位</span>
      </div>
    </MyHead>
    <div class="cboxs">
        <div class="navs">
          <van-tabs v-model="type" color="#ee0a24" title-active-color="#ee0a24" sticky>
            <van-tab v-for="(item,index) in levels" :key="index" :title="item" :name="index">
                <div class="boxm">
                  <div class="left">
                    <van-sidebar v-model="activeKey"  >
                      <van-sidebar-item title="有录音"   />
                      <van-sidebar-item title="无录音" />
                    </van-sidebar>
                  </div>
                  <div class="right">
                    <MList :noques="true" v-if="activeKey==0" :list="list.filter((v)=>(lel[type].indexOf(v.level) >-1 && v.audioSrc ))"  ></MList>
                    <MList :noques="true" v-if="activeKey==1" :list="list.filter((v)=>lel[type].indexOf(v.level) >-1 && !v.audioSrc)"  ></MList>
                  </div>
                </div>
            </van-tab>
          </van-tabs>
        </div>
    </div>
  </div>
</template>

<script>
import { todogetallinters } from '@/api/api'
export default {
  data(){
    return {
      type:0,
      activeKey:0,
      list:[]
    }
  },
  methods:{
    async getAllMsList(){
      let res = await todogetallinters()
      if(res.code==200){
        this.list = res.result;
      }
    }
  },
  mounted(){
    this.getAllMsList()
  }
}
</script>


<style lang="scss" scoped>
.classify{
  width:100%;
  height:100vh;
  .boxm{
    display: flex;
    width:100%;
    height:calc(100vh - 90px);
    .left{
      flex-shrink: 0;
    }
    .right{
      flex:1;
      height:100%;
      overflow: auto;
    }
  }
}
</style>
